<template>
    <span class="cpt-label-state light" :class="labelClass" :style="labelStyle">&nbsp;</span>
</template>
<script>
    import {GET_STATUS,GET_FAR_STATUS,GET_LAZY_STATUS} from '../../serves/data-status'
    export default{
        name:'LightLabel',
        props:{
            pData:{
                type:[String,Number],
                request:true
            },
            pName:{
                type:String,
                request:true
            },
            pKeyText:{
                type:String,
                default:'code'
            },
            pValueText:{
                type:String,
                default:'name'
            },
            pLazy:{
                type:Boolean,
                default:false
            },
            pFar:{
                type:Boolean,
                default:false
            },
            pNilFirst:{
                type:Boolean,
                default:false
            }
        },
        data(){
            return{
                labelClass:'',
                labelStyle:''
            }
        },
        created(){
            this.init();
        },
        methods:{
            setCss(value){
                if(value){
                    if(value.match(/^#[A-Fa-f0-9]{6}$/)){
                        this.$set(this.$data,'labelClass','badge');
                        this.$set(this.$data,'labelStyle','background-color:'+value);
                    }else{
                        this.$set(this.$data,'labelClass','badge '+value);
                        this.$set(this.$data,'labelStyle','');
                    }
                }else {
                    this.$set(this.$data,'labelClass','');
                    this.$set(this.$data,'labelStyle','');//&&'badge '+d[this.pData+''].btnClass
                }
            },
            init(){
                this.initData(GET_FAR_STATUS(this.pName,true,this.pKeyText));
            },
            initData(d){
                if(d[this.pData+'']!=undefined){
                    this.setCss(d[this.pData+''].btnClass);
                }else{
                    if(this.pNilFirst&&this.pData!=''){
                        if(d['1']!=undefined){
                            this.setCss(d['1'].btnClass);
                        }else {
                            this.setCss('');
                        }
                        return void 0;
                    }
                    this.setCss('');
                }
            }
        },
        watch:{
            pData(newVal,olVal){
                if(newVal!=olVal){
                    this.init()
                }
            }
        },
        components:{

        }
    }
</script>